<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="tab-container">
          <div class="con-title">新建</div>
          <el-form
            style="width: 78%; "
            ref="ruleForm1"
            :model="infoForm"
            :rules="addrules"
            label-width="100px"
            autocomplete="off"
          >
            <el-form-item label="名称" prop="name">
              <el-input
                style="width: 40%"
                size="small"
                maxlength="16"
                placeholder="请输入名称"
                v-model="infoForm.name"
              ></el-input>
            </el-form-item>
            <el-form-item label="关联业务">
              <el-select
                style="width: 40%"
                size="small"
                clearable
                v-model="infoForm.sessionId"
                placeholder="请选择"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option label="信贷" value="1"></el-option>
                <el-option label="信用卡" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="技能组">
              <el-select
                style="width: 40%"
                size="small"
                clearable
                v-model="infoForm.sessionId"
                placeholder="请选择"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option label="技能组1" value="1"></el-option>
                <el-option label="技能组2" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内容">
               <el-radio v-model="infoForm.content" label="1">自定义</el-radio>
               <el-radio v-model="infoForm.content" label="2">文件上传</el-radio>
            </el-form-item>
            <el-form-item label="标题" prop="title" v-show="infoForm.content == 1">
              <el-input
                style="width: 40%"
                size="small"
                maxlength="16"
                placeholder="请输入标题"
                v-model="infoForm.title"
              ></el-input>
            </el-form-item>
            <el-form-item label="内容" v-show="infoForm.content == 1">
              <el-input
                style="width: 40%"
                type="textarea"
                size="small"
                placeholder="请输入内容"
                v-model="infoForm.remark"
              ></el-input>
            </el-form-item>
            <el-form-item v-show="infoForm.content == 2">
                <el-upload
                    class="upload-demo"
                    ref="uploadBatch"
                    action="string"
                    accept=".pdf"
                    :limit="1"
                    :http-request="httpRequestExport"
                    :auto-upload="false"
                >
                <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
                <div class="el-upload__text" style="color:#409EFF">选择文件</div>
            </el-upload>
            </el-form-item>
          </el-form>

          <div style="width: 78%; margin-left: 70px">
            <el-button size="mini" type="default" @click="cancel()"
              >取消</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="saveAdd()"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MD5 from "js-md5";
import HeaderTitle from "@/components/Headertitle/index";
import {
  fetchAdd,
  fetchGetData,
  fetchDetail,
} from "@/api/systemapi/restmanage.js";
export default {
  components: {
    HeaderTitle,
  },
  data() {
    return {
      entNum: "",
      titleList: [{ title: "新建" }],
      organprops: {
        label: "name",
        children: "children",
        value: "id",
        checkStrictly: true,
      },
      type: "", //查看编辑新增
      addRelated: true, // add相关控件隐藏显示
      viewShow: true, // 查看展示
      editid: "", // id
      treeData: null,
      infoForm: {
        name: "", // 视讯号码
        remark: "", // 密码
        sort: "",
        title:"",//标题
        content:""//内容
      },
      addrules: {
        name: [
          { required: true, message:"请输入名称", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1到 16个字符",
            trigger: "blur",
          },
        ],
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      ccodShow: false,
      zsAudioStatus: "",
    };
  },
  mounted() {
    const { entNum } = this.$route.query;
    this.entNum = entNum;
    this.type = this.$route.query.type;
    if (this.type == "2") {
      this.titleList[1].title = "查看小休";
      this.viewShow = false;
      this.getEditData(this.$route.query.id);
    }
  },
  methods: {
    cancel() {
      this.$router.push({
        name: "readstatemanage",
        params: { entNum: this.entNum },
      });
    },
    getEditData(id) {
      fetchDetail({ id: id }).then((res) => {
        this.infoForm = res.data;
      });
    },
    saveAdd() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs["ruleForm1"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
      Promise.all([p1]).then(() => {
        fetchAdd({ ...this.infoForm }).then((response) => {
          if (response.code == 0) {
            this.cancel();
          } else {
            this.$message({
              type: "error",
              message: response.msg,
            });
          }
        });
      });
    },
    // 批量导入文件
    httpRequestExport(param) {
      console.log(param, "param");
      let fileObj = param.file; // 相当于input里取得的files
      console.log(fileObj, "fileObj");
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("meetingId", this.formObj.meetingId); // 文件对象
      fd.append("sessionId", this.formObj.sessionId); // 文件对象
      fd.append("agentId", this.formObj.agentId); // 文件对象
      fd.append("fileType", this.formObj.fileType); // 文件对象
      fd.append("skillId", this.formObj.skillId); // 文件对象
      fd.append("remark", this.formObj.remark); // 文件对象
      console.log(fd, "fd");
      fetchAdd(fd).then((res) => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.fetchData();
          param.file = null
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .tab-container {
        width: 100%;
        margin-top: 15px;
        .con-title {
          margin-bottom: 15px;
          font-size: 14px;
          color: #666;
          font-weight: bold;
          margin-left: 10px;
        }
        .elform-item {
          display: flex;
          .item {
            width: 40%;
            margin-right: 20px;
          }
          .item-span {
            color: #ccc;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
